<template>
	<view class="root">
		<!-- #ifdef MP-WEIXIN -->
		<view class="status_bar">

		</view>
		<!-- #endif -->
		<view class="header">
			<view class="header_top">

				<image @click="back()" src="../../../static/img/arrow-left-bold.png" mode=""></image>

				<text>春节节日补助在线申请</text>
			</view>
		</view>
		<view class="body">

			<uni-forms :value="formData" ref="form" :rules="rules">
				<uni-group>

					<view style="margin-bottom: 15px;" class="">
						<text>1、基本情况</text>
					</view>

					<uni-forms-item required label="学号" name="stu_id">
						<uni-easyinput disabled type="text" v-model="formData.stu_id" placeholder="请输入学号">
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item required label="姓名" name="name">
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item required label="联系电话" name="tel">
						<uni-easyinput type="number" v-model="formData.tel" placeholder="请输入联系电话"></uni-easyinput>
					</uni-forms-item>
					
					<uni-forms-item required label="补助范围" name="type">
						 <uni-data-checkbox  v-model="formData.type" :localdata="rangeType"></uni-data-checkbox>
					</uni-forms-item>
				</uni-group>

				<uni-group>
					<view style="margin-bottom: 15px;">
						<text>2、申请理由</text>
					</view>
					<view style="display: none;">
						<uni-forms-item name="num">

						</uni-forms-item>
					</view>
					<uni-forms-item name="tea">
						<view class="tea">
							<textarea v-model="formData.tea" value="" placeholder="家庭情况、在校表现，120-150字" maxlength="150"
								 />
						</view>

						<view class="">
							<text style="float: right;">{{input_num}}/150</text>
						</view>
					</uni-forms-item>

				</uni-group>


				<uni-group>
					<button @click="submitForm">提交</button>
				</uni-group>

			</uni-forms>
		</view>
		<view style="margin-left: 25rpx;" class="">
			数据来源：学生资助管理中心
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			return {
				id: '',
				input_num: 0,
				rangeType:[{
					value:1,
					text:'第1类'
				},{
					value:2,
					text:'第2类'
				},{
					value:3,
					text:'第3类'
				}],
				//表单数据
				formData: {
					stu_id: '',
					name: '',
					tel: '',
					tea: '',
					type:0,
				},
				//表单验证规则
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名'
							},
							{
								minLength: 2,
								maxLength: 10,
								errorMessage: '姓名最长{maxLength}位'
							},
						]
					},
				
					tel: {
						rules: [{
								required: true,
								errorMessage: '请输入联系电话'
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '长度为11位'
							},
						]
					},
					type:{
						rules: [{
								required: true,
								errorMessage: '请选择补助类型'
							}
						]
					},
					tea: {
						rules: [{
								required: true,
								errorMessage: '请输入申请理由'
							},
							{
								minLength: 120,
								maxLength: 150,
								errorMessage: '长度在{minLength}-{maxLength}之间'
							}
						]
					}
				}
			}
		},
		onLoad: function(options) {
			// 初始化vk框架
			that = this;
			vk = that.vk;
			that.options = options;
			
			this.formData.stu_id = vk.getVuex('$user.userInfo.username')
			
			//请求已提交数据
			let chunjie_info = uni.getStorageSync('chunjie_info')
			if(chunjie_info){
				this.formData = chunjie_info
				return
			}

			
		},
		watch:{
			// 监听tea
			'formData.tea':function (val){
				this.input_num = val.length
			}
		},
		methods: {
			submitForm(form) {
				// 提交表单
				this.$refs.form.submit().then(res => {
					uni.setStorage({
						key:'chunjie_info',
						data:this.formData
					})
					vk.callFunction({
						url: 'client/chunjie/kh/add',
						title: '请求中...',
						data: this.formData,
						success: async (res) =>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							// 延迟一秒跳转
							setTimeout(()=>{
								vk.redirectTo({
									url:'../../applyList/applyList'
								})
							},500)
							
						},
						fail: (err) => {
							
						}
					});
				}).catch(err => {


				})
				setTimeout(function() {
					uni.hideLoading()
				}, 500)
			},
			back() {
				vk.navigateBack()
			},
		},

	}
</script>

<style scoped>
	.header_top {
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		background-color: #3669f8;
		/* position: fixed; */
	}

	.header_top text {
		margin-left: -10px;
	}


	.header_top image {
		width: 20px;
		height: 20px;
		float: left;
		margin-top: 12.5px;
		margin-left: 10px;
	}

	.sel {
		height: 36px;
		border: .6px solid #eee;
		border-radius: 4px;
		line-height: 36px;
		/* box-sizing: border-box; */
		padding-left: 10px;
		padding-right: 10px;
		color: rgb(128, 128, 128);
	}

	.sel image {
		float: right;
		width: 20px;
		height: 20px;
		margin-top: 8px;

	}

	.tea textarea {
		border: .6px solid #eee;
		border-radius: 4px;
		width: 100%;
	}
</style>
